<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>文字朗读器</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      text-align: center;
    }
    textarea {
      width: 100%;
      height: 120px;
      padding: 10px;
      margin: 10px 0;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>🔊 文字转语音朗读器</h1>
  <p>输入文字，点击【朗读】即可播放</p>
  <textarea id="text" placeholder="请输入要朗读的文字..."></textarea><br />
  <button onclick="speak()">朗读</button>
  <button onclick="stop()">停止</button>

  <script>
    function speak() {
      const text = document.getElementById("text").value.trim();
      if (!text) return alert("请输入文字！");
      
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = "zh-CN";
      utterance.rate = 1;
      utterance.pitch = 1;
      window.speechSynthesis.speak(utterance); // 已修复
    }

    function stop() {
      window.speechSynthesis.cancel();
    }
  </script>
</body>
</html>
